<template>
	<s-layout title="转账" class="withdraw-wrap" navbar="normal">
		<view class="recharge-box">
			<view class="recharge-card-box">
				<uni-forms :model="state.model" :rules="state.rules" labelPosition="left" border class="form-box">
					<view class="bg-white">
						<uni-forms-item name="mobile" label="手机号">
							<uni-easyinput v-model="state.mobile" placeholder="请输入手机号" :inputBorder="false"
								:clearable="false" @blur="getUser(state.mobile)" type="number">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="nickname" label="姓名">
							<uni-easyinput v-model="state.name" disabled :styles="{ disableColor: '#fff' }"
								:inputBorder="false" />
						</uni-forms-item>
						<uni-forms-item name="nickname" label="昵称" class="border-bottom">
							<uni-easyinput v-model="state.nickname" disabled :styles="{ disableColor: '#fff' }"
								:inputBorder="false" />
						</uni-forms-item>
						<uni-forms-item name="nickname" label="用户名" class="border-bottom">
							<uni-easyinput v-model="state.username" disabled :styles="{ disableColor: '#fff' }"
								:inputBorder="false" />
						</uni-forms-item>
					</view>

				</uni-forms>
				<view class="input-box ss-flex money">
					<view class="unit">￥</view>
					<uni-easyinput v-model="state.money" type="number" placeholder="请输入转账金额" :inputBorder="false">
					</uni-easyinput>
				</view>
			</view>
			<button class="ss-reset-button save-btn col ss-p-x-30" @tap="state.showModal = true">
				确认转账
			</button>
			<!-- 转账弹框 -->
			<su-popup :show="state.showModal" type="center" round="20" @close="state.showModal = false">
				<view class="ss-p-x-20 ss-p-y-30 box">
					<view class="model-title ss-m-b-30 ss-m-l-20">请输入密码</view>
					<view class="input-box ss-flex ss-col-center border-bottom ss-m-b-30 ss-m-x-20">
						<uni-easyinput :inputBorder="false" class="ss-flex-1 ss-p-l-10" v-model="state.password"
							type="password" placeholder="请输入密码" />
					</view>
					<view class="ss-flex btn">
						<button class="ss-reset-button model-btn" @tap="state.showModal = false">
							取消
						</button>
						<button class="ss-reset-button model-btn col" @tap="onConfirm">
							确认转账
						</button>
					</view>
				</view>
			</su-popup>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const userInfo = computed(() => sheep.$store('user').userInfo);
	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
	const headerBg = sheep.$url.css('/assets/addons/shopro/uniapp/user/withdraw_bg.png');

	const state = reactive({
		data: {},
		username: '',
		name: '',
		mobile: '',
		password: '',
		money: '',
		nickname:''
	});

	// 根据手机号查找用户
	async function getUser(mobile) {
		if (mobile.length == 11) {
			const {
				code,
				data
			} = await sheep.$api.user.getMobileUser({
				mobile
			});
			if (code == 1) {
				state.name = data.name;
				state.username = data.username;
				state.nickname = data.nickname
			}
		} else {
			uni.showToast({
				title: '正确输入手机号码'
			})
		}

	}

	function onChange(e) {
		state.data.gift_type = e.detail.value;
	}

	async function onConfirm() {
		if(state.money <= 0){
			uni.showToast({
				title: '请正确输入金额',
				icon: 'error',
			})
			return
		}
		const res = await sheep.$api.user.transfer({
			mobile: state.mobile,
			money: state.money,
			password: state.password,
		});
		if (res.code === 1) {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			state.showModal = false
			setTimeout(() => {
				sheep.$router.back();
			}, 1500)

			// // #ifdef MP
			// sheep.$platform.useProvider('wechat').subscribeMessage('money_change');
			// // #endif
			// sheep.$router.go('/pages/pay/index', {
			// 	orderSN: data.order_sn,
			// 	type: 'recharge',
			// });
		}
	}
	onLoad(() => {

	});
</script>

<style lang="scss" scoped>
	:deep() {
		.uni-input-input {
			font-family: OPPOSANS !important;
		}
	}

	.col {
		background: #2CB9A4 !important;
		color: #fff !important;
	}

	.box {
		width: 660rpx;

		.model-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
		}

		.btn {
			display: flex;
			justify-content: flex-end;
			padding-left: 280rpx;
		}

		.model-btn {
			width: 94%;
			margin: 0 auto;
			height: 60rpx;
			border-radius: 10rpx;
			font-size: 26rpx;
			padding: 6rpx 10rpx;
			font-weight: 500;
			margin-right: 30rpx;
			color: #555555;
			background: #DADADA;
			line-height: normal;
		}

		.money {
			:deep(.uni-easyinput__content-input) {
				font-size: 60rpx !important;
			}
		}

		.input-box {
			height: 100rpx;

			// .unit {
			// 	font-size: 48rpx;
			// 	color: #333;
			// 	font-weight: 600;
			// 	line-height: normal;
			// }

			.uni-easyinput__placeholder-class {
				font-size: 30rpx;
				height: 40rpx;
				line-height: normal;
			}
		}
	}

	.recharge-box {
		position: relative;
		padding: 0 30rpx;
		margin-top: 30rpx;
	}

	.save-btn {
		width: 700rpx;
		height: 86rpx;
		border-radius: 14rpx;
		font-size: 30rpx;
		margin: 50rpx auto;
	}

	.recharge-card-box {
		width: 690rpx;
		background: var(--ui-BG);
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.unit {
			display: flex;
			align-items: center;
			font-size: 54rpx;
			font-weight: 600;
			margin-right: 10rpx;
		}

		.uni-easyinput__placeholder-class {
			font-size: 30rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
		}

		:deep(.uni-easyinput__content-input) {
			font-size: 34rpx;
		}
	}
</style>